<template>
  <div>
    <el-card>
      <!-- 表单 -->
      <el-form class="herder" :data="ordersData" :inline="true">
        <el-form-item class="card_item" label="店铺名称：">
          <el-input v-model="ordersData.shopName" placeholder="请输入" />
        </el-form-item>
        <el-form-item class="card_item" label="行业">
          <el-select v-model="ordersData.trade" placeholder="请选择:">
            <el-option label="订单一" value="bgl" />
            <el-option label="订单二" value="hks" />
          </el-select>
        </el-form-item>

        <el-form-item label="下单日期:">
          <el-date-picker
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
      </el-form>
      <el-row class="footrow">
        <el-button type="primary" size="small">查询</el-button>
        <el-button size="small">重置</el-button>
      </el-row>
      <el-row>
        <el-button type="primary" size="medium">统计分析</el-button>
      </el-row>
      <!-- 表单 -->
      <el-table :data="statiData">
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column prop="statiData.shopID" label="商户ID" />
        <el-table-column prop="statiData.shopName" label="商户名称" />
        <el-table-column prop="statiData.trade" label="行业" />
        <el-table-column prop="statiData.TotalNumber" label="订单总数量" />
        <el-table-column prop="statiData.afterSale" label="退款/售后单" />
        <el-table-column prop="statiData.salesRate" label="售后率" />
        <el-table-column prop="statiData.refundNumber" label="确认退款数" sortable />
        <el-table-column prop="statiData.refundRate" label="确认退款率" />
      </el-table>
      <!-- 分页 -->
      <el-pagination
        class="footpage"
        :current-page="page.rcurrentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'OrderStatistics',
  data() {
    return {
      ordersData: {
        shopName: '', // 店铺名称
        trade: '' // 行业
      },
      // 表单
      statiData: {
        shopId: '', // 商户id
        shopName: '', // 店铺名称
        trade: '', // 行业
        TotalNumber: '', // 订单总数
        afterSale: '', // 退款
        salesRate: '', // 售后率
        refundNumber: '', // 确认退款数
        refundRate: '' // 收货人
      },
      page: {
        pager: 1, // 当前页
        pageSize: 10 // 每页显示条数
      }
    }
  },
  methods: {
    //   改变页码时
    handleSizeChange() {},
    //  当前页改变时
    handleCurrentChange() {}
  }
}
</script>

<style lang="less" scoped>
.footrow{
  display: flex;
  flex-direction: row-reverse;
}
.herder{
  display: flex;
  justify-content: space-between;
}
.footpage{
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>
